<template>
  <Spin :spinning="loading" tip="Loading...">
  <div>
    <BreakSpace label="索赔结算单列表" :containerStyle="{ marginBottom: '10px' }" />
    <FilterTable
      ref="table"
      :columns="columns"
      :params="fetchParams"
      :dataSource="dataList"
      :datakey="'records'"
      :onColumnsChange="(columns) => (this.columns = columns)"
      :onCellChange="onCellChange"
      :isSelectColumn="false"
      :isPagination = false
      height="auto"
    >
<!--      <template slot="controls" slot-scope="props">-->
<!--        <multiuse-button size="small" type="primary" icon="el-icon-plus" @click="jiesuandanadd()">添加</multiuse-button>-->
<!--      </template>-->
    </FilterTable>
    <div style="padding-top: 3rem"></div>
    <BreakSpace label="发票信息维护" :containerStyle="{ marginBottom: '10px' }" />
    <FilterTable
      ref="tableInvoice"
      :columns="columns1"
      :params="fetchParams"
      :dataSource="dataList"
      :datakey="'records'"
      :onColumnsChange="(columns) => (this.columns = columns)"
      :onCellChange="onCellChange"
      :isSelectColumn="false"
      :isPagination = false
      height="auto"
    >
<!--      <template slot="controls" slot-scope="props">-->
<!--        <multiuse-button size="small" type="primary" icon="el-icon-plus" @click="addInvoice()">添加</multiuse-button>-->
<!--      </template>-->
    </FilterTable>
    <!--发票form-->
    <div style="padding-top: 3rem"></div>
    <FormPanel ref="formPanel" :list="formList" :cols="1" :formType="'add'" labelWidth="110" :isSubmitBtn="false" @formChange="formChangeHandle" />
    <div style="padding-top: 3rem"></div>
    <BreakSpace label="索赔单列表" :containerStyle="{ marginBottom: '10px' }" />
    <FilterTable
      ref="table2"
      :columns="columns2"
      :params="fetchParams"
      :dataSource="dataList"
      :datakey="'records'"
      :onColumnsChange="(columns) => (this.columns = columns)"
      :onCellChange="onCellChange"
      :isSelectColumn="false"
      :isPagination = false
      height="auto"
    >
    </FilterTable>
    <div style="padding-top: 3rem"></div>
    <BreakSpace label="考核单列表" :containerStyle="{ marginBottom: '10px' }" />
    <FilterTable
      ref="table3"
      :columns="columns3"
      :params="fetchParams"
      :dataSource="dataList"
      :datakey="'records'"
      :onColumnsChange="(columns) => (this.columns = columns)"
      :onCellChange="onCellChange"
      :isSelectColumn="false"
      :isPagination = false
      height="auto"
    >
    </FilterTable>
    <div style="padding-top: 3rem"></div>
    <BreakSpace label="审核列表" :containerStyle="{ marginBottom: '10px' }" />
    <FilterTable
      ref="table4"
      :columns="columns4"
      :params="fetchParams"
      :dataSource="dataList"
      :datakey="'items'"
      :onColumnsChange="columns => (this.columns = columns)"
      :onRowSelectChange="selectChange"
      :isSelectColumn="false"
      :isPagination = false
      height="auto"
    >
    </FilterTable>
    <!--快递form-->
    <div style="padding-top: 3rem"></div>
    <FormPanel ref="formPanel1" :list="formList1" :cols="3" :formType="'add'" labelWidth="110" :isSubmitBtn="false" @formChange="formChangeHandle1" />
    <div style="padding-top: 3rem"></div>
    <div style="padding-top: 3rem"></div>
    <div
      :style="{
        position: 'fixed',
        left: 0,
        bottom: 0,
        right: 0,
        zIndex: 9,
        borderTop: '1px solid #e9e9e9',
        padding: '10px 20px',
        background: '#fff',
        textAlign: 'right',
      }"
    >
      <multiuse-button type="primary" @click="back" v-show="editIds.length > 0" :disabled="index == 0">上一单</multiuse-button>
      <multiuse-button type="primary" @click="next" v-show="editIds.length > 0" :disabled="index == editIds.length - 1">下一单</multiuse-button>
      <multiuse-button type="primary" :click="tongGuo.bind()" :disabled="editIds[index] && editIds[index].status == 1">通 过</multiuse-button>
      <multiuse-button type="primary" :click="boHui.bind()" :disabled="editIds[index] && editIds[index].status == 1">驳 回</multiuse-button>
      <multiuse-button @click="closeDialog">关 闭</multiuse-button>
    </div>
  </div>
    <BaseDialog :title="'查看附件'" :visible.sync="upVisible" destroyOnClose>
      <uploadFile :rowData="assessId" @close="upVisible = false"></uploadFile>
    </BaseDialog>
  </Spin>
</template>
<script>
  //索赔结算单选择
  //选择结算单之后回带索赔单和考核单信息
  import { isFormEmpty } from '@/utils/index';
  import { approve,quyrpBatch} from '@/api/claim/factory/ClaimInvoiceCheck';
  import uploadFile from './uploadFile';
  export default {
    props: [ 'rowData', 'editIds'],
    components: {
      uploadFile
    },
    data() {
      return {
        loading: false,
        saveFlag: 8,
        index: 0,
        kaohedanMoney:0,
        suopeidanMoney:0,
        jiesuandanMoney:0,
        kaipiaozongMoney:0,
        countfapiaoShu:0,
        jine:0,
        shuie:0,
        kaipiaoshuilv:0,
        editRow: {},
        dataList: [],
        dataList1: [],
        visible: false,
        jiesuandanFlag: false,
        visibleDrawer: false,
        collapse: false,
        infoId: null,
        flterValue: {}, //参数
        columns: this.creatHeader(),
        columns1: this.creatHeader1(),
        columns2: this.creatHeader2(),
        columns3: this.creatHeader3(),
        columns4: this.creatHeader4(),
        fetchParams: {}, //ipa 接口
        selectedRows: [], //选中经销商
        formList: this.createFormList(),
        formList1: this.createFormList1(),
        saveData: null,
        activeName: '审核记录',
        saveData1: {},
        invoiceShow: false,
        delInvoiceIds:'',
        upVisible:false,
        assessId:null
      };
    },
    created() {
      this.loading = true;
      if (this.editIds.length) {
         this.getDetailFun(this.editIds[0].batchId);
      } else {
         this.getDetailFun(this.rowData.batchId);
         this.index=0;
      }
      this.loading = false;
    },
    methods: {
      //通过
      async tongGuo() {
        this.saveFlag = 0;
        // this.formList1.find(x => x.fieldName === 'checkRemarks').rules= [{ required: true, message: '请输入审核备注', trigger: 'change' }];
        // if (this.formList1.find(x => x.fieldName === 'checkRemarks').initialValue) {
          this.$refs.formPanel1.SUBMIT_FORM();
          //判断是保存还是提交 通过0 驳回1
          if (this.saveFlag == 0) {
            this.editRow.batchStatus = 55481004;
          } else if (this.saveFlag == 1) {
            this.editRow.batchStatus = 55481005;
          }
          // for (let a in this.editRow) {
          //   if (this.saveData[a]) {
          //     this.editRow[a] = this.saveData[a];
          //   }
          // }
          this.editRow.checkRemarks = this.saveData1.checkRemarks;

          this.loading = true;
          let res = await approve(this.editRow);

          if (res.resultCode == 200) {
            if(this.editIds.length){
              this.editIds[this.index].status = 1;
              this.next();
            } else {
              this.$emit('save');
            }
          }
          this.loading = false;
       // }
      },  //驳回
      async boHui() {
        this.saveFlag = 1;
        this.formList1.find(x => x.fieldName === 'checkRemarks').rules= [{ required: true, message: '请输入审核备注', trigger: 'change' }];
        if (this.formList1.find(x => x.fieldName === 'checkRemarks').initialValue) {
          this.$refs.formPanel1.SUBMIT_FORM();
          //判断是保存还是提交 通过0 驳回1
          if (this.saveFlag == 0) {
            this.editRow.batchStatus = 55481004;
          } else if (this.saveFlag == 1) {
            this.editRow.batchStatus = 55481005;
          }
          // for (let a in this.editRow) {
          //   if (this.saveData[a]) {
          //     this.editRow[a] = this.saveData[a];
          //   }
          // }
          this.editRow.checkRemarks = this.saveData1.checkRemarks;
          this.loading = true;
          let res = await approve(this.editRow);

          if (res.resultCode == 200) {
            if(this.editIds.length){
              this.editIds[this.index].status = 1;
              this.next();
            } else {
              this.$emit('save');
            }
          }
          this.loading = false;
        }else{
          this.$notify.error({title: '提示信息', message:  '保存失败,请检查数据格式和必填项!'});
        }
      },
      async next() {
        if (this.index != this.editIds.length - 1) {
          this.index++;
        }
        this.loading = true;
        await this.getDetailFun(this.editIds[this.index].batchId);
        this.loading = false;
      },
      async back() {
        if(this.index != 0){
          this.index --;
          this.loading = true;
          await this.getDetailFun(this.editIds[this.index].batchId);
          this.loading = false;
        }
      },
      //保存
      async saveDialog() {
        this.$refs.formPanel1.SUBMIT_FORM();
        //判断是保存还是提交 通过0 驳回1
        if (this.saveFlag == 0) {
          this.editRow.batchStatus = 55481004;
        } else if (this.saveFlag == 1) {
          this.editRow.batchStatus = 55481005;
        }
        // for (let a in this.editRow) {
        //   if (this.saveData[a]) {
        //     this.editRow[a] = this.saveData[a];
        //   }
        // }
        this.editRow.checkRemarks = this.saveData1.checkRemarks;

        let res = await approve(this.editRow);

        if (res.resultCode == 200) {
          if(this.editIds.length){
            this.editIds[this.index].status = 1;
            this.next();
          } else {
            this.$emit('save');
          }
        }
      },
      async getDetailFun(val) {
        let res= await quyrpBatch(val);
        this.editRow = res.data;
        //发票form赋值
        for (let i in res.data) {
          this.formList.map(x => {
            if (x.fieldName == i) {
              x.initialValue = res.data[i];
            }
          });
        };
        //快递form赋值
        for (let i in res.data) {
          this.formList1.map(x => {
            if (x.fieldName == i) {
              x.initialValue = res.data[i];
            }
          });
        };

        //为table赋值(索赔单)
        if (200 == res.resultCode) {
          let data = res.data;
          if (isFormEmpty(data)) {
            data = {};
          }
          let records = data.settleList;
          if (isFormEmpty(records)) {
            records = [];
          }
          this.$refs.table.$refs.pageTable.EXECUTE_DELETE(this.$refs.table.$refs.pageTable.list);
          this.$refs.table.$refs.pageTable.EXECUTE_INSERT(records);
        };
        //为table赋值(索赔单)
        if (200 == res.resultCode) {
          let data = res.data;
          if (isFormEmpty(data)) {
            data = {};
          }
          let records = data.claimList;
          if (isFormEmpty(records)) {
            records = [];
          }
          this.$refs.table2.$refs.pageTable.EXECUTE_DELETE(this.$refs.table2.$refs.pageTable.list);
          this.$refs.table2.$refs.pageTable.EXECUTE_INSERT(records);
          this.$refs.table2.$refs.pageTable.list.map((x) => {
            if(x.ifPrice == '是'){
              x.finalSumAmount =x.priceAmount;
            }
          });
        };
        //为table赋值(考核单)
        if (200 == res.resultCode) {
          let data = res.data;
          if (isFormEmpty(data)) {
            data = {};
          }
          let records = data.assessList;
          if (isFormEmpty(records)) {
            records = [];
          }
          this.$refs.table3.$refs.pageTable.EXECUTE_DELETE(this.$refs.table3.$refs.pageTable.list);
          this.$refs.table3.$refs.pageTable.EXECUTE_INSERT(records);
        };
        //为table赋值(审核日志)tableInvoice
        if (200 == res.resultCode) {
          let data = res.data;
          if (isFormEmpty(data)) {
            data = {};
          }
          let records = data.logList;
          if (isFormEmpty(records)) {
            records = [];
          }
          this.$refs.table4.$refs.pageTable.EXECUTE_DELETE(this.$refs.table4.$refs.pageTable.list);
          this.$refs.table4.$refs.pageTable.EXECUTE_INSERT(records);
        };
        //为table赋值(发票)
        if (200 == res.resultCode) {
          let data = res.data;
          if (isFormEmpty(data)) {
            data = {};
          }
          let records = data.invoiceList;
          if (isFormEmpty(records)) {
            records = [];
          } else {
            records.map((x) => {
              x.invoiceMoney = x.settleAmount;
              x.invoiceAmout = x.invoiceAmount;
              x.submitDate = this.editRow.submitDate;
            });
          }
          this.$refs.tableInvoice.$refs.pageTable.EXECUTE_DELETE(this.$refs.tableInvoice.$refs.pageTable.list);
          this.$refs.tableInvoice.$refs.pageTable.EXECUTE_INSERT(records);
          //取出ids
          let ids1 = [];
          this.$refs.tableInvoice.$refs.pageTable.list.map(x => {
            ids1.push(x.invoiceId);
          });
          let ids = '';
          ids1.map(x => {
            ids += x + ','
          });
          this.delInvoiceIds = ids;
          console.log(this.delInvoiceIds);
        }
      },
      addInvoice() {
        this.invoiceShow = true;
      },jiesuandanadd(){
        this.jiesuandanFlag = true;
      },
      saveAddInvoice(invoice) {
        let list = [];
        list.push(invoice);
        this.$refs.tableInvoice.$refs.pageTable.EXECUTE_INSERT(list);
        this.invoiceShow = false;
      },
      closeAddInvoice() {
        this.invoiceShow = false;
      },
      onCellChange(columns, row) {
        let sum = 0;
        this.$refs.table.$refs.pageTable.list.map((x) => {
          console.log(x);
          sum += Number(x.pestructionCount);
        });
        console.log(sum);
        this.formList.find((x) => x.fieldName == 'destoryCount').initialValue = sum;
        this.formList.find((x) => x.fieldName == 'cmsClaimCount').initialValue = this.$refs.table.$refs.pageTable.list.length;
      },
      jiesuandanClose() {
        this.jiesuandanFlag = false;
      },

      formChangeHandle(val) {
        this.saveData = val;
      },
      formChangeHandle1(val) {
        this.saveData1 = val;
      },
      //搜索获取数据
      changeHandle(val) {
        this.fetchParams = val;
      },
      //选中
      selectChange(rows) {
        this.selectedRows = rows;
        console.log(this.selectedRows);
      },
      //取消操作
      closeDialog() {
        this.$emit('close');
      },
      chooseOrderNo() {
        this.visible = true;
      },
      editFile(row){
        this.upVisible = true;
        this.assessId = row.assessId;
      },
      createFormList() {
        return [
          {
            type: 'TEXT_AREA',
            label: '开票备注',
            disabled:true,
            fieldName: 'invoiceRemarks',
            initialValue: '',
            placeholder: '请输入数量...'
          },
          {
            type: 'TEXT_AREA',
            label: '邮寄说明',
            disabled:true,
            fieldName: 'expressRemarks',
            initialValue: '',
            placeholder: '请输入数量...'
          },
          // {
          //   type: 'UPLOAD_FILE',
          //   label: '选择文件',
          //   fieldName: 'fileList',
          //   placeholder: '选择文件...',
          //   initialValue: [{ name: 'food.jpeg', fileId: '11',url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' }],
          //   upload: {
          //     actionUrl: '/api/file/oss/upload',
          //     limit: 2,
          //     tipText: '（支持PDF、RAR、JPG格式）'
          //   }
          // }
        ];
      },
      //table表头和数据源
      creatHeader() {
        return [
          {
            title: '序号',
            dataIndex: 'index',
            width: 80,
            sorter: true,
            render: (props) => {
              return <span>{props.row.index + 1}</span>;
            },
          },
          { title: '经销商代码', dataIndex: 'ownerCode', sorter: true },
          { title: '经销商名称', dataIndex: 'dealerName', sorter: true },
          { title: '结算单号', dataIndex: 'settleNo', sorter: true },
          { title: '索赔单数', dataIndex: 'claimCount', sorter: true },
          { title: '索赔金额', dataIndex: 'claimAmount', sorter: true },
          { title: '结算金额', dataIndex: 'settleAmount', sorter: true },
          { title: '考核金额', dataIndex: 'assessAmount', sorter: true },
          { title: '开票时间', dataIndex: 'createdAt', sorter: true }
        ];
      },
      creatHeader1() {
        return [
          {
            title: '序号',
            dataIndex: 'index',
            width: 80,
            sorter: true,
            render: (props) => {
              return <span>{props.row.index + 1}</span>;
            },
          },

          { title: '发票号', dataIndex: 'invoiceNo', sorter: true },
          { title: '开票金额', dataIndex: 'invoiceAmout', sorter: true, summation: true ,precision:2},
          { title: '税率', dataIndex: 'taxRate', sorter: true, summation: true ,precision:2},
          { title: '金额', dataIndex: 'invoiceMoney', sorter: true, summation: true ,precision:2},
          { title: '税额', dataIndex: 'taxAmount', sorter: true, summation: true ,precision:2},
          { title: '开票时间', dataIndex: 'submitDate', sorter: true },
        ];
      },
      //开票备注和附件
      createFormList1() {
        return [
          {
            type: 'INPUT',
            label: '快递单号',
            disabled: true,
            fieldName: 'expressNo',
          },
          {
            type: 'INPUT',
            label: '厂家收票人',
            disabled: true,
            fieldName: 'oemCol',
          },
          {
            type: 'INPUT',
            label: '收票地址',
            disabled: true,
            fieldName: 'oemAddress',
          },
          {
            type: 'INPUT',
            label: '开票信息',
            disabled: true,
            fieldName: 'invoiceInfo',
          },
          {
            type: 'INPUT',
            label: '其他提示',
            disabled: true,
            fieldName: 'otherRemarks',
          }, {
            type: 'TEXT_AREA',
            label: '审核意见',
            selfCols: 3,
            maxlength: 200,
            fieldName: 'checkRemarks',
            initialValue: '',
            rules: [],
            placeholder: '请输入审核意见...',
          }
        ];
      },

      //索赔单列表
      creatHeader2() {
        return [
          {
            title: '序号',
            dataIndex: 'index',
            width: 80,
            sorter: true,
            render: props => {
              return <span>{props.row.index + 1}</span>;
            }
          },
          { title: '经销商代码', dataIndex: 'ownerCode', sorter: true },
          { title: '经销商名称', dataIndex: 'ownerName', sorter: true },
          { title: '索赔单号', dataIndex: 'claimNo', sorter: true },
          { title: '维修工单号', dataIndex: 'roNo', sorter: true },
          { title: 'VIN', dataIndex: 'vin', sorter: true },
          { title: '主损件代码', dataIndex: 'partCode', sorter: true },
          { title: '主损件名称', dataIndex: 'partName', sorter: true },
          { title: '维修开始时间', dataIndex: 'serviceBeginDate', sorter: true },
          { title: '结算单生成时间', dataIndex: 'settleDate', sorter: true },
          { title: '车型名称', dataIndex: 'modelName', sorter: true },
          { title: '索赔类型', dataIndex: 'cmsClaimTypeStr', sorter: true },
          { title: '是否一口价', dataIndex: 'ifPrice', sorter: true },
          { title: '工时费', dataIndex: 'labourFinalPrice', sorter: true },
          { title: '配件费', dataIndex: 'partrFinalPrice', sorter: true },
          { title: '附加费用', dataIndex: 'addFinalPrice', sorter: true },
          { title: '索赔金额', dataIndex: 'finalSumAmount', sorter: true },
          { title: '审核时间', dataIndex: 'checkAt', sorter: true },
          { title: '审核人', dataIndex: 'checkBy', sorter: true },
          { title: '主键', dataIndex: 'claimId', hidden: true },
        ];
      },
      //考核单列表
      creatHeader3() {
        return [
          {
            title: '序号',
            dataIndex: 'index',
            width: 80,
            sorter: true,
            render: props => {
              return <span>{props.row.index + 1}</span>;
            }
          },
          {
            title: '操作',
            dataIndex: 'column-action',
            width: 90,
            render: props => {
              return (
                <div style="text-align:center">
                  <multiuse-button type="text" onClick={() => this.editFile(props.row)} >
                    查看附件
                  </multiuse-button>
                </div>
              );
            }
          },
          { title: '考核单号', dataIndex: 'assessNo', sorter: true },
          { title: '考核类型', dataIndex: 'assessTypeStr', sorter: true },
          { title: '考核金额', dataIndex: 'assessAmount', sorter: true },
          { title: '考核原因', dataIndex: 'assessReason', sorter: true },
          { title: '考核日期', dataIndex: 'assessDate', sorter: true },
          { title: '考核人', dataIndex: 'assessByStr', sorter: true },
          { title: '主键', dataIndex: 'assessId', hidden: true }
        ];
      },//考核单列表
      creatHeader4() {
        return [
          {
            title: '序号',
            dataIndex: 'index',
            width: 80,
            sorter: true,
            render: props => {
              return <span>{props.row.index + 1}</span>;
            }
          },
          { title: '审核人', dataIndex: 'checkBy', sorter: true },
          { title: '审核时间', dataIndex: 'checkAt', sorter: true },
          { title: '审核状态', dataIndex: 'statusStr', sorter: true },
          { title: '审核原因', dataIndex: 'checkRemarks', sorter: true }
        ];
      }
    },
  };
</script>

<style lang="less" scoped></style>
